import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'


// 可以把它理解成一个 名为 router的 组件集合
Vue.use(Router)

export default new Router({
  // mode默认是hash, 所以vue的网页上会有/#/, 
  // 如果想去掉/#/, 那么使用history模式
  mode: 'history',
  mode: 'hash',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/Home')
    },
    {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    },
    {
      // path: '/detail/:id',//后面加:id(其实这个id是占位的, 取个haha也没事)是配置动态路由的写法, 这种写法如果页面后面不加上detal/xx, 那么'detail页面渲染不出来, 所以detail后面一定要跟/xx
      path: '/detail/:haha',//这里用haha,后面就要用this.$route.params.haha
      path: '/detail/:id',//
      name: 'Detail',
      component: () => import('@/pages/detail/Detail')
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    // to是终点/from是起点 的一个对象集合,  savvePosition是终点的position(scroll)的位置(坐标)
    // console.log(savedPosition)
    // return的值是跳转路由后scroll的坐标, 一般都设x0, y0
    return {
      x: 0, 
      y: 0
    }
  }
})
